<template>
	<view class="yue-hexiao-modal">


		<u-popup :show="show" mode="center" @close="closePop" @open="openPop" zIndex="10071" :closeOnClickOverlay="true"
			:safeAreaInsetBottom="false" round="10rpx">
			<view class="pop-ctx">
				<view class="pop-close flex-center" @click="close_pop()">
					<image class="close" src="@/static/hexiao/hexiao-close.png" mode=""></image>
				</view>
				<view class="pop-head">
					核销
				</view>
				<view class="pop-body">
					<view class="title">
						输入核销金额
					</view>
					<view class="input-box">
						<u--input v-model="hexiao_money" placeholder="请输入金额" border="none" clearable fontSize="30px"
							:customStyle="{height: '56px'}"></u--input>
					</view>
					<view class="scan-box flex-center" @click="doScan()">
						<image class="close" src="@/static/hexiao/scan.png" mode=""></image>
						<text>扫用户余额码</text>
					</view>

					<view class="scan-result">
						扫码结果：<text class="result-text">{{hexiao_value ? '已扫码' : '未扫码'}}</text>
					</view>

					<view class="btn-box">
						<view class="btn flex-center" :class="{'has-value': hexiao_value.length}" @click="doConfirm()">
							确认核销
						</view>
					</view>
				</view>
			</view>
		</u-popup>


		<u-popup :show="show_result" mode="center" @close="closePopResult" @open="openPopResult" zIndex="10071"
			:closeOnClickOverlay="true" :safeAreaInsetBottom="false" round="10rpx">
			<view class="pop-result-ctx">
				<view class="pop-result-body">
					<view class="top-box">
						<view class="title">
							{{hexiao_result}}
						</view>
					</view>
					<view class="btn-box" @click="show_result = false">
						<view class="btn flex-center">
							我知道了
						</view>
					</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		name: "modal-user-pinglun",
		props: {
			user: null,
		},
		data() {
			return {
				show: false,
				show_result: false,
				hexiao_value: '',
				hexiao_money: '',
				hexiao_result: ''
			}
		},

		methods: {
			init() {
				this.show = true;
			},
			openPop() {

			},
			closePop() {
				this.show = false;
			},
			close_pop() {
				this.show = false;
			},
			doConfirm() {
				if (!this.hexiao_value) {
					// this.$alert('请输入核销金额')
					return
				}
				if (!this.hexiao_money) {
					this.$alert('请输入核销金额')
					return
				}
				uni.$u.throttle(this.doHexiaoFn, 2000, true)
			},



			doHexiaoFn() {
				this.$api({
					url: '/hxCode',
					method: 'post',
					data: {
						hx_code: this.hexiao_value,
						price: this.hexiao_money,
					},
				}).then(res => {
					// this.hideLoading()
					// this.$alert(res)
					this.hexiao_result = res.msg
					this.show = false;
					this.show_result = true;
					this.hexiao_value = ''
					this.hexiao_money = ''
					if (res.code == 200) {
						this.$emit('confirm')
					}
				})
			},

			doScan() {
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						console.log('扫码结果', res);
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.hexiao_value = res.result;
					}
				});
			}
		},
	}
</script>


<style lang="scss">
	.yue-hexiao-modal .input-box input {
		height: 112rpx;
	}
	.yue-hexiao-modal .u-input__content {
		height: 112rpx;
	}
	.yue-hexiao-modal .u-input__content__field-wrapper__field {
		height: 112rpx;
	}
	
</style>

<style lang="scss" scoped>
	::v-deep .u-popup__content {
		// border-radius: 32rpx 32rpx 32rpx 32rpx;
		background: transparent;
	}

	::v-deep .u-input__content__field-wrapper__field {
		height: 112rpx;
	}



	.pop-ctx {
		position: relative;
		width: calc(100vw - 72rpx);
		padding: 40rpx 0;
		margin: 0 auto;
		height: auto;
		border-radius: 20rpx;
		// overflow: hidden;
		background: #fff;
	}


	.pop-close {
		position: absolute;
		top: 0;
		left: 0;
		// transform: translate(-50%);
		width: 130rpx;
		height: 130rpx;


		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.pop-head {
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 40rpx;
		color: #222222;
	}

	.pop-body {
		padding: 80rpx 50rpx 40rpx;


		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 34rpx;
			color: #222222;
		}

		.input-box {
			margin-top: 40rpx;
			border-bottom: 1rpx solid #DDDDDD;
		}


		.scan-box {
			margin-top: 40rpx;
			padding: 20rpx 0;

			image {
				margin-right: 20rpx;
				width: 36rpx;
				height: 36rpx;
			}

			text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 34rpx;
				color: #27A09A;
			}
		}
		
		.scan-result {
			margin: 40rpx 0;
			margin-top: 0;
			text-align: center;
			text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 34rpx;
				color: #666;
			}
			
			text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 34rpx;
				color: #27A09A;
			}
		}
		

		.btn-box {
			margin-top: 40rpx;

			.btn {
				height: 80rpx;
				background: #DDDDDD;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;

				&.has-value {
					background: linear-gradient(112deg, #FF8B17 0%, #F54242 46%, #F54242 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}
			}
		}
	}




	.pop-result-ctx {
		position: relative;
		width: calc(100vw - 72rpx);
		padding: 0 0;
		margin: 0 auto;
		height: auto;
		border-radius: 20rpx;
		// overflow: hidden;
		background: #fff;

		.pop-result-body {

			.top-box {
				padding: 60rpx 50rpx 95rpx 50rpx;

				.title {
					text-align: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #222222;
				}
			}

			.btn-box {
				border-top: 1rpx solid #eee;

				.btn {
					height: 94rpx;
					line-height: 94rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #27A09A;
				}
			}
		}
	}
</style>